<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  第一步引入 vue.js -->
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">

<!--    父组件向子组件传递方法的 时候是使用 事件机制 -->
        <child v-on:func="show"></child>
<!--        <child @func="msg"></child>-->


    </div>

<!--    使用template 语法写的 子组件-->
    <template id="child">
        <div>
            <h1>这个是子组件</h1>
            <input type="button" value="这个是子组件的 button ，点击可以触发父组件的方法" @click="myclick">
        </div>
    </template>



    <script>

        var vm=new Vue({
            el:"#app" ,
            data:{
                msg:"这个是父亲组件的信息 ",
            },
            methods:{
                show(data){
                    console.log("调用了父亲组件的方法----"+data)
                }
            },
            components:{
                // 这个挂载了子组件
                child:{
                    template:"#child",

                    methods: {
                        myclick(){
                            console.log("调用了子组件的方法 ，正在给父组件");
                            // 当点击了子组件的时候,如何给 父组件调用，使用this.$emit
                            this.$emit("func","这个是子组件的数据")
                        }
                    }

                },

            }

        });

    </script>

</body>
</html>